<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/cascade/production/build-full.min.css" />
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/site.css" />
        <!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
        <!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
        <title>Cascade Framework</title>
        <meta name="description" content="Professional Frontend framework that makes building websites easier than ever.">
        <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">

        </style>
    </head>
    <body class="narrow">
        <div class="site-center">
            <div class="site-body">
                <div class="site-header">
                    <div class="tags sitemenutags">
                        <div class="cell">
                            <ul class="nav blocks">
                                <li class=""><a href="https://github.com/jslegers/cascadeframework/archive/master.zip" class="">Download v1.5</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col width-fill sitemenu">
                        <div class="col width-fit mobile-width-fit">
                            <div class="cell">
                                <a href="index.html" class="logo"></a>
                            </div>
                        </div>
                        <div class="col width-fill mobile-width-fill">
                            <div class="cell">
                                <ul class="nav">
                                    <li><a href="grid.html">Grid</a></li>
                                    <li class="active"><a href="typography.html">Typography</a></li>
                                    <li><a href="icons.html">Icons</a></li>
                                    <li><a href="components.html">Components</a></li>
                                    <li><a href="templates.html">Templates</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="sitemenu-responsive col collapsible collapsed">
                        <div class="col collapse-trigger">
                            <div class="cell">
                                <ul class="nav ">
                                    <li><a href="#"><span class="icon icon-32 icon-align-justify"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col">
                            <div class="left collapse-section">
                                <div class="cell">
                                    <ul class="nav">
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="grid.html">Grid</a></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="components.html">Components</a></li>
                                        <li><a href="templates.html">Templates</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="cell">
                        <div class="col">
                            <div class="cell">
                                <div class="page-header">
                                    <h1>Typography <small>documentation</small></h1>
                                </div>
                            </div>
                        </div>


                        <div class="col width-1of4">
                            <div class="cell menu">
                                <span class="tiny">Typography types</span>
                                <ul class="left nav links">
                                    <li><a href="typography.html">Basic typography</a></li>
                                    <li class="active"><a href="typography-form.html">Form elements</a></li>
                                    <li><a href="typography-additional.html">Additional markup</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col width-fill">











                            <div class="col">
                                <div class="cell">
                                    <h2>Forms</h2>
                                    <p>Cascade framework normalises form elements without forcing you into a specific layout.<br>
                                        Cells embedded into a form element nevertheless have a smaller margin, allowing you to use the framework's grid system
                                        to build a simple responsive form with the same ease as building your overall design as shown in the example below.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <form action="#" method="post">
                                                        <div class="col">
                                                            <div class="col width-1of4">
                                                                <div class="cell">
                                                                    <label for="firstname">First name<span class="color-red"> *</span></label>
                                                                </div>
                                                            </div>
                                                            <div class="col width-fill">
                                                                <div class="cell">
                                                                    <input type="text" id="firstname" placeholder="Your first name"  data-required="true" data-error-message="First name is required">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="col width-1of4">
                                                                <div class="cell">
                                                                    <label for="lastname">Last name<span class="color-red"> *</span></label>
                                                                </div>
                                                            </div>
                                                            <div class="col width-fill">
                                                                <div class="cell">
                                                                    <input type="text" id="lastname" placeholder="Your last name" data-required="true" data-error-message="Last name is required">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="col width-1of4">
                                                                <div class="cell">
                                                                    <label for="country">Country</label>
                                                                </div>
                                                            </div>
                                                            <div class="col width-fill">
                                                                <div class="cell">
                                                                    <select id="country">
                                                                        <option>Canada</option>
                                                                        <option>Mexico</option>
                                                                        <option>USA</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="col width-1of4">
                                                                <div class="cell">
                                                                    <label for="male">Gender</label>
                                                                </div>
                                                            </div>
                                                            <div class="col width-fill">
                                                                <div class="cell">
                                                                    <input name="gender" id="male" type="radio" class="radio">
                                                                    <label for="male">Man</label>
                                                                    <input name="gender" id="female" type="radio" class="radio">
                                                                    <label for="female">Woman</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="col width-1of4">
                                                                <div class="cell">
                                                                    <label for="occupation">Occupation</label>
                                                                </div>
                                                            </div>
                                                            <div class="col width-fill">
                                                                <div class="cell">
                                                                    <input type="text" id="occupation" placeholder="Your occupation" class="text">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="col width-1of4">
                                                                <div class="cell">
                                                                    <label for="webdev">Hobbies</label>
                                                                </div>
                                                            </div>
                                                            <div class="col width-fill">
                                                                <div class="cell">
                                                                    <input name="hobbies" id="webdev" type="checkbox" class="checkbox">
                                                                    <label for="webdev">Web development</label>
                                                                    <input name="hobbies" id="design" type="checkbox" class="checkbox">
                                                                    <label for="design">Design</label>
                                                                    <input name="hobbies" id="programming" type="checkbox" class="checkbox">
                                                                    <label for="programming">Programming</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="col width-1of4">
                                                                <div class="cell">
                                                                    <label for="comment">Comment<span class="color-red"> *</span></label>
                                                                </div>
                                                            </div>
                                                            <div class="col width-fill">
                                                                <div class="cell">
                                                                    <textarea id="comment" data-required="true" data-error-message="Comment is required"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="col width-1of4">
                                                            </div>
                                                            <div class="col width-fill">
                                                                <div class="cell">
                                                                    <button class="button" type="submit">Submit</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>






                            <div class="col">
                                <div class="cell">
                                    <h2>Buttons</h2>
                                    <p>Cascade framework provides a normalised look for buttons. Regardless of which HTML tag you use, your buttons should look the same.
                                        The example below shows a button made from a button element, a div element, an a element, an input element and a span element.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <form>
                                                        <div>
                                                            <button class="button">Add Item</button>
                                                            <div class="button">Add Item</div>
                                                            <a class="button">Add Item</a>
                                                            <input type="submit" value="Add Item" class="button submit">
                                                            <span class="button">Add Item</span>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>






                            <div class="col">
                                <div class="cell">
                                    <h2>Button sets</h2>
                                    <p>Button sets group buttons into a cohesive whole. The example below shows two button sets side by side, which is a common layout for menu bars.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <form>
                                                        <div class="col">
                                                            <div class="cell">
                                                                <div class="button-group">
                                                                    <div class="button">1</div>
                                                                    <div class="button">2</div>
                                                                    <div class="button">3</div>
                                                                    <div class="button">4</div>
                                                                </div>
                                                                <div class="button-group">
                                                                    <div class="button">5</div>
                                                                    <div class="button">6</div>
                                                                    <div class="button">7</div>
                                                                    <div class="button">8</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>






                            <div class="col">
                                <div class="cell">
                                    <h2>Buttons with icons</h2>
                                    <p>The example below illustrates how buttons can be combined with icons. Cascade Framework is packed with FontAwesome, which is a
                                        webfont released with the Open Font Lisense, granting you the same liberties as the rest of the framework. In line with the philosophy
                                        behind the framework, these icons are cross-browser and support old IE up to IE6 through the use of CSS expressions.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <a class="button icon-button" href="#"><span class="icon icon-repeat"></span> Reload</a>
                                                    <button class="icon-button button"><span class="icon icon-link"></span> Add link</button>
                                                    <span class="button-group">
                                                        <a class="button icon-button" href="#"><span class="icon icon-italic"></span></a>
                                                        <a class="button icon-button" href="#"><span class="icon icon-bold"></span></a>
                                                        <a class="button icon-button" href="#"><span class="icon icon-underline"></span></a>
                                                        <a class="button icon-button" href="#"><span class="icon icon-paper-clip"></span></a>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>













                        </div>
                    </div>
                </div>
            </div>
            <div class="site-footer">
                <div class="cell">
                    <div id="sociallogos">
                        <a href="https://twitter.com/cascadecss"><span class="icon icon-32 icon-twitter"></span></a>
                        <a href="http://www.facebook.com/cascadeframework"><span class="icon icon-32 icon-facebook-sign"></span></a>
                        <a href="https://github.com/CascadeFramework"><span class="icon icon-32 icon-github"></span></a>
                        <div class="col">
                            &#169; 2013, <a href="http://www.johnslegers.com/">John Slegers</a>
                        </div>
                    </div>
                    <a href="http://www.cascade-framework.com/" class="powered-by"></a>
                </div>
            </div>
        </div>
        <script src="assets/js/app.js"></script>
    </body>
</html>
